<template>
  <div>
    <el-card shadow="always" :style="{ paddingLeft: '40px' }">
      <div slot="header">
        <span>spu名称:{{ spuinfo.spuName }}</span>
      </div>
      <el-form label-width="80px" :inline="false" size="normal">
        <el-form-item label="SKU 名称">
          <el-input size="small" v-model="skuinfo.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
          <el-input size="small" v-model.number="skuinfo.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(千克)">
          <el-input size="small" v-model="skuinfo.weight"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
          <el-input type="textarea" v-model="skuinfo.skuDesc"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
          <el-form label-width="80px" :inline="true" size="normal">
            <el-form-item
              :label="item.attrName"
              v-for="(item, index) in AttrsList"
              :key="item.id"
              :style="{ margin: '0px 10px 20px' }"
            >
              <el-select
                placeholder="请选择"
                v-model="attrselect[index]"
                clearable
                filterable
              >
                <el-option
                  v-for="el in item.attrValueList"
                  :key="el.id"
                  :value="`${el.attrId}:${el.id}`"
                  :label="el.valueName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="销售属性" size="normal">
          <el-form label-width="80px" :inline="true" size="normal">
            <el-form-item
              :label="item.saleAttrName"
              v-for="(item, index) in saleAttrList"
              :key="item.id"
              :style="{ margin: '0px 10px 20px' }"
            >
              <el-select
                placeholder="请选择"
                v-model="saleselect[index]"
                clearable
                filterable
              >
                <el-option
                  v-for="el in item.spuSaleAttrValueList"
                  :key="el.id"
                  :value="`${el.baseSaleAttrId}:${el.id}`"
                  :label="el.saleAttrValueName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="图片列表" size="normal">
          <el-table
            :data="imageList"
            :style="{ margin: '20px 0px' }"
            @selection-change="handleSelectionChange"
            border
            stripe
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column label="图片">
              <template v-slot="{ row }">
                <img width="100" :src="row.imgUrl" alt="" />
              </template>
            </el-table-column>
            <el-table-column label="名称" prop="imgName"> </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <el-tag
                  type="success"
                  size="normal"
                  :disable-transitions="true"
                  v-if="row.isSelectDefault"
                  >当前为默认</el-tag
                >
                <el-button
                  type="primary"
                  size="default"
                  v-else
                  @click="changeDefault(row)"
                  >设置为默认</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" size="medium" @click="saveSkuinfo">
            保存</el-button
          >
          <el-button size="medium" @click="$emit('changeIndex', 0)">
            取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getAttrsList } from "@/api/attrs";
import { reqImageList, reqAttrsList } from "@/api/spu";
import { addSkuItem } from "@/api/sku";
import { mapState } from "vuex";
export default {
  name: "Skuinfo",
  props: ["spuinfo"],
  mounted() {
    this.getInitDate(this.spuinfo.id);
  },
  data() {
    return {
      AttrsList: [],
      imageList: [],
      saleAttrList: [],
      skuinfo: {
        spuId: 0,
        price: "",
        skuName: "",
        skuDesc: "",
        weight: "",
        tmId: 0,
        category3Id: this.category3id,
        skuDefaultImg: "",
        isSale: 0,
        skuImageList: [],
        skuAttrValueList: [],
        skuSaleAttrValueList: []
      },
      // 用于存储选中的销售属性id
      saleselect: [],
      // 存储选中的平台属性
      attrselect: [],
      imageSelectList: [],
      // 默认图片
      defaultIndex: -1
    };
  },
  computed: {
    ...mapState("category", ["category1id", "category2id", "category3id"])
  },
  methods: {
    //根据spuid请求初始数据
    async getInitDate(id) {
      let AttrsList = await getAttrsList(
        this.category1id,
        this.category2id,
        this.category3id
      );
      let imageList = await reqImageList(id);
      let saleAttrList = await reqAttrsList(id);
      this.AttrsList = AttrsList;
      this.imageList = imageList.map(item => {
        item.isSelectDefault = false;
        return item;
      });
      this.saleAttrList = saleAttrList;
    },
    // 选中平台属性时触发
    // attrChange(index){
    //   this.attrselect[index]=
    // }
    // 选中图片时
    handleSelectionChange(file) {
      const arr = [];
      file.forEach(item => {
        arr.push({
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          spuImgId: item.spuId,
          isDefault: "0"
        });
      });
      this.imageSelectList = arr;
    },
    // 设置默认图片
    changeDefault(row) {
      this.skuinfo.skuDefaultImg = row.imgUrl;
      this.imageList.forEach(item => {
        item.isSelectDefault = false;
      });
      row.isSelectDefault = true;
    },
    //整理数据发送请求
    async saveSkuinfo() {
      //杂项
      const { tmId, id } = this.spuinfo;
      this.skuinfo.tmId = tmId;
      this.skuinfo.spuId = id;
      this.skuinfo.category3Id = this.category3id;
      // 平台属性整理
      this.attrselect.forEach(item => {
        if (item) {
          const [attrId, valueId] = item.split(":");
          this.skuinfo.skuAttrValueList.push({
            attrId: +attrId,
            valueId: +valueId
          });
        }
      });
      // 销售平台属性
      this.saleselect.forEach(item => {
        if (item) {
          const [saleAttrId, saleAttrValueId] = item.split(":");
          this.skuinfo.skuSaleAttrValueList.push({
            saleAttrId: +saleAttrId,
            saleAttrValueId: +saleAttrValueId
          });
        }
      });
      // 图片属性
      this.skuinfo.skuImageList = this.imageSelectList;
      await addSkuItem(this.skuinfo);
      this.$message({
        type: "success",
        message: "数据添加成功"
      });
      this.$emit("changeIndex", 0);
    }
  }
};
</script>

<style></style>
